<template>
  <div>
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>卡密兑换</el-breadcrumb-item>
      </el-breadcrumb>
      <ul class="notice">
        <li>卡密为一次性，只能扩容一次，切勿泄露。</li>
        <li>购买卡密请联系站长</li>
      </ul>
      <el-form
        ref="CamiFormRef"
        :model="camiForm"
        :rules="CamiRules"
        label-width="50px"
      >
        <el-form-item label="卡密" prop="key">
          <el-input v-model="camiForm.key"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary cami_btn" @click="onSubmit">兑换</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userinfo: JSON.parse(sessionStorage.getItem("userinfo")),
      camiForm: {
        key: "",
      },
      // 注册表单验证规则
      CamiRules: {
        key: [{ required: true, message: "请输入卡密", trigger: "blur" }],
      },
    };
  },
  created() {},
  methods: {
    onSubmit() {
      this.$refs.CamiFormRef.validate(async (valid) => {
        if (!valid) {
          this.$message.error("请正确的填写表单！");
          return;
        }
        // 发送请求
        const { data: res } = await this.$http.post("/cami", {
          key: this.camiForm.key,
          id: this.userinfo.id,
        });
        if (res.meta.status != 200) {
          this.$message.error(res.meta.msg);
          return;
        }
        this.$message.success("扩容成功！");
      });
    },
  },
};
</script>

<style scoped>
.el-form {
  margin: 20px 0;
}
.cami_btn {
  float: right;
}
.notice {
  padding: 10px 15px;
}
.notice li {
  padding: 5px 0;
  color: #cf8889;
}
</style>
